<template>
  <div class="mainContent">
    <div class="month">
      <div class="flex jbetween">
        <div @click="handleSwitchMonth('minus')">❮</div>
        <div>{{ currentMonth }}</div>
        <div @click="handleSwitchMonth('add')">❯</div>
      </div>
    </div>
    <div class="content">
      <div class="days">
        <div class="weekdays">日</div>
        <div class="weekdays">一</div>
        <div class="weekdays">二</div>
        <div class="weekdays">三</div>
        <div class="weekdays">四</div>
        <div class="weekdays">五</div>
        <div class="weekdays">六</div>
        <div v-for="item in weekNum"></div>
        <div
          class="item"
          v-for="item in dateDayCount"
          @click="handleDataDetail(item)"
          :class="{ activeDate: activeDate == item }"
        >
          <div class="h100">
            <div class="width100 h100">
              <div
                class="activeBar width100"
                v-if="item == nowDateDay && nowDateYearMonth == currentMonth"
              ></div>
              <div class="flex acenter jcenter fdc h100">
                <div>{{ item }}</div>
                <div v-for="course in formatCourseCount(item)" class="cbtn">
                  {{ course.Name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="courseContent" v-show="CourseList && CourseList.length">
      <div class="title">上课信息</div>
      <van-collapse v-model="activeNames">
        <van-collapse-item :name="item.ID" v-for="item in CourseList">
          <template #title>
            <div class="flex acenter jbetween">
              <div>{{ item.Name_Course }}</div>
              <div>{{ item.StartAndEnd }}</div>
            </div>
          </template>
          <van-cell
            title-style="color:#969799"
            title="班级"
            :value="item.Name_Class"
          />
          <van-cell
            title-style="color:#969799"
            title="场地"
            :value="item.Name_Place"
          />
          <van-cell
            title-style="color:#969799"
            title="教师"
            :value="item.Name_Teacher"
          />
          <van-cell
            title-style="color:#969799"
            title="设备"
            :value="item.Name_Device"
          />
          <van-cell
            title-style="color:#969799"
            title="课时"
            :value="item.CourseHour"
          />
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="ExameContent" v-show="ExameList && ExameList.length">
      <div class="title">考试信息</div>
      <van-collapse v-model="activeNames">
        <van-collapse-item :name="item.ID" v-for="item in ExameList">
          <template #title>
            <div class="flex acenter jbetween">
              <div>{{ item.Name_Course }}</div>
              <div>{{ item.StartAndEnd }}</div>
            </div>
          </template>
          <van-cell
            title-style="color:#969799"
            title="班级"
            :value="item.Name_Class"
          />
          <van-cell
            title-style="color:#969799"
            title="场地"
            :value="item.Name_Place"
          />
          <van-cell
            title-style="color:#969799"
            title="监考老师"
            :value="item.Name_Teacher"
          />
          <van-cell
            title-style="color:#969799"
            title="关联设备"
            :value="item.Name_Device"
          />
          <van-cell
            title-style="color:#969799"
            title="关联证书"
            :value="item.Name_Certificate"
          />
        </van-collapse-item>
      </van-collapse>
    </div>
    <div style="height: 40px"></div>
  </div>
</template>

<script setup>
import {
  GetAlreadyScheduleDate,
  GetScheduleDateDetail,
  GetScheduleIDDetail
} from '@/api/schedule/class.js';
import useUserStore from '@/store/modules/user.js';
const currentMonth = ref('');
const userInfo = computed(() => useUserStore().userInfo);
const { proxy } = getCurrentInstance();
const dateDayCount = ref(0);
const weekNum = ref(0);
const nowDateDay = proxy.$moment().date();
const nowDateYearMonth = proxy.$moment().format('YYYY-MM');
const activeDate = ref(0);
const queryParams = ref({});
const dateList = ref([]);
const activeNames = ref([]);
const CourseList = ref([]);
const ExameList = ref([]);
onMounted(() => {
  currentMonth.value = proxy.$moment().format('YYYY-MM');
  weekNum.value = proxy.$moment(proxy.$moment().startOf('months')).day();
  queryParams.value = {
    EndTime: proxy.$moment().endOf('months').format('YYYY-MM-DD'),
    StartTime: proxy.$moment().startOf('months').format('YYYY-MM-DD')
  };
  getDateList();
  dateDayCount.value = proxy.$moment().daysInMonth();
  activeDate.value = nowDateDay;
  console.log(activeDate.value);
  handleDataDetail(nowDateDay);
});

async function getDateList() {
  let Type = 1;
  let ID = '';
  if (userInfo.value.Type == 3) return;
  if (userInfo.value.Type == 1) {
    Type = 1;
    ID = userInfo.value.ID_Class;
  }
  if (userInfo.value.Type == 2) {
    Type = 4;
    ID = userInfo.value.ID;
  }
  try {
    let query = {
      ID,
      Type,
      ...queryParams.value
    };
    let res = await GetAlreadyScheduleDate(query);
    dateList.value = res.data;
  } catch (error) {
    console.log(error);
  }
}

function handleSwitchMonth(type) {
  activeDate.value = 0;
  dateList.value = [];
  CourseList.value = [];
  ExameList.value = [];
  switch (type) {
    case 'minus':
      currentMonth.value = proxy
        .$moment(proxy.$moment(currentMonth.value).subtract(1, 'months'))
        .format('YYYY-MM');

      break;
    case 'add':
      currentMonth.value = proxy
        .$moment(proxy.$moment(currentMonth.value).add(1, 'months'))
        .format('YYYY-MM');
      break;
  }
  queryParams.value = {
    EndTime: proxy
      .$moment(currentMonth.value)
      .endOf('months')
      .format('YYYY-MM-DD'),
    StartTime: proxy
      .$moment(currentMonth.value)
      .startOf('months')
      .format('YYYY-MM-DD')
  };
  weekNum.value = proxy
    .$moment(proxy.$moment(currentMonth.value).startOf('months'))
    .day();
  dateDayCount.value = proxy.$moment(currentMonth.value).daysInMonth();
  getDateList();
}

async function handleDataDetail(day) {
  activeDate.value = day;
  let dateDay = '';
  if (day < 10) {
    dateDay = '0' + day;
  } else {
    dateDay = day;
  }
  let Date = currentMonth.value + '-' + dateDay;
  let Type = 1;
  let ID = '';
  if (userInfo.value.Type == 3) return;
  if (userInfo.value.Type == 1) {
    Type = 1;
    ID = userInfo.value.ID_Class;
  }
  if (userInfo.value.Type == 2) {
    Type = 4;
    ID = userInfo.value.ID;
  }
  let query = {
    Date,
    Type,
    ID
  };
  let res = await GetScheduleDateDetail(query);
  res.data?.forEach(item => {
    item.StartAndEnd =
      item.StartTime?.slice(11, 16) + ' - ' + item.EndTime?.slice(11, 16);
  });
  CourseList.value = res.data?.filter(item => item.Type == 1);
  ExameList.value = res.data?.filter(item => item.Type == 2);
}

function formatCourseCount(day) {
  let data = dateList.value?.find(item => {
    return proxy.$moment(item.Date).date() == day;
  });
  if (data) {
    data.AlreadyCount?.forEach(item => {
      item.Name = item.Name?.slice(0, 3);
    });
    return data.AlreadyCount?.slice(0, 2);
  } else {
    return [];
  }
}
</script>

<style lang="scss" scoped>
.mainContent {
  background-color: #f4f8ff;
  min-height: 100vh;
}
.month {
  padding: 0 20px;
  width: 100%;
  background: white;
  div {
    padding: 5px 20px;
  }
}
.content {
  .weekdays {
    padding: 6px 6px 0 6px;
  }

  .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    grid-gap: 10px;
    width: 100%;
    .item {
      height: 60px;
      width: 100%;
      text-align: center;
      background-color: white;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
    }
  }
}
.cbtn {
  color: white;
  font-size: 12px;
  border-radius: 3px;
  padding: 0 2px;
  &:nth-child(2) {
    background-color: #356df2;
    margin-bottom: 1px;
  }
  &:nth-child(3) {
    background-color: #ff69b4;
  }
}
.activeBar {
  background-color: #356df2;
  height: 5px;
  border-radius: 2.5px;
  position: absolute;
  left: 0;
  top: 0;
}
.activeDate {
  background-color: #d6e3f8 !important;
  // color: white;
}
.title {
  margin-bottom: 4rpx;
  // padding-top: 10rpx;
  margin-top: 10px;
  position: relative;
  padding-left: 10px;
  margin-left: 10px;
  &::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: #1989fa;
    border-radius: 2px;
  }
}
.ExameContent {
  color: rgb(209, 19, 19);
  .title {
    &::before {
      background-color: rgb(209, 19, 19) !important;
    }
  }
}
:deep(.van-collapse-item__content) {
  padding: 0 10px;
}
</style>
